<!DOCTYPE html>
<html>
<head>
	<title>商品列表</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../css/bootstrap.css"/>
	<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../uploadjs/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../uploadjs/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="../../uploadjs/jquery.fileupload.js"></script>
    <script type="text/javascript" src="../../js/auth.js"></script>
    <script type="text/javascript" src="../../js/CookieShop.js"></script>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">蛋糕商城</a>
                <a class="navbar-brand" href="../../pages/index.html">集成后台</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li ><a href="../../custpages/admin/order_list.html">订单管理</a></li>
                    <li ><a href="../../custpages/admin/user_list.html">客户管理</a></li>
                    <li ><a href="../../custpages/admin/goods_list.html">商品管理</a></li>
                    <li ><a href="../../custpages/admin/type_list.html">类目管理</a></li>
                    <li><a href="javascript:cookieShopLogout()">退出</a></li>
                </ul>
            </div>
        </div>
    </nav>
	<div class="text-right"><a class="btn btn-warning" data-toggle="modal" data-target="#addModal">添加商品</a></div>
	<br>
	<ul role="tablist" class="nav nav-tabs">
		<li class="active" role="presentation"><a href="../admin/goods_list.html">全部商品</a></li>
		<li class="active" role="presentation"><a href="../admin/goods_list.html?recommendTypeId=1">条幅推荐</a></li>
		<li class="active" role="presentation"><a href="../admin/goods_list.html?recommendTypeId=2">热销推荐</a></li>
		<li class="active" role="presentation"><a href="../admin/goods_list.html?recommendTypeId=3">新品推荐</a></li>
	</ul>
	<br>
	<table class="table table-bordered table-hover">
		<tr id="dghead">
			<th width="5%">ID</th>
			<th width="10%">图片</th>
			<th width="10%">名称</th>
			<th width="20%">介绍</th>
			<th width="10%">价格</th>
			<th width="10%">类目</th>
			<th width="25%">操作</th>
		</tr>
		<tbody id="dgcontent">
		</tbody>
	</table>
	<br>
	<div style='text-align:center;'>
        <a class='btn btn-info' id="first" href="javascript:first()">首页</a>
        <a class='btn btn-info' id="prev" href="javascript:prev()">上一页</a>
        <h3 style='display:inline;'>[<span id="currentPage"></span>/<span id="totalPage"></span>]</h3>
        <h3 style='display:inline;'>[<span id="recordsCount"></span>]</h3>
        <a class='btn btn-info' id="next" href="javascript:next()">下一页</a>
        <a class='btn btn-info' id="last" href="javascript:last()">尾页</a>
        <input type='text' class='form-control' id="current" style='display:inline;width:60px;'/><a class='btn btn-info' href='javascript:void(0);' onclick='jump()'>GO</a>
    </div>
	<br>
</div>

<!-- 模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
         	<form class="form-horizontal" action="" method="post" id="ff">
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">名称</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="name" name="name"  required="required">
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">价格</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="price" name="price" >
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">介绍</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="intro" name="intro" >
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">库存</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="stock" name="stock" >
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_file" class="col-sm-4 control-label">封面图片</label>
         			<div class="col-sm-6">
                        <span id="coverCanvas"></span>
                        <input id="addGoodsCoverFileupload" type="file" name="files[]" data-url="../../controller/goodsController/addUploadGoodsCover">推荐尺寸: 500 * 500
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_file" class="col-sm-4 control-label">详情图片1</label>
         			<div class="col-sm-6">
                        <span id="image1Canvas"></span>
             			<input id="addGoodsImage1Fileupload" type="file" name="files[]" data-url="../../controller/goodsController/addUploadGoodsImage1">推荐尺寸: 500 * 500
                    </div>
          		</div>
          		<div class="form-group">
         			<label for="input_file" class="col-sm-4 control-label">详情图片2</label>
         			<div class="col-sm-6">
                        <span id="image2Canvas"></span>
             			<input id="addGoodsImage2Fileupload" type="file" name="files[]" data-url="../../controller/goodsController/addUploadGoodsImage2">推荐尺寸: 500 * 500
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="select_topic" class="col-sm-4 control-label">类目</label>
         			<div class="col-sm-6">
            				<select class="form-control" id="goodsTypeId" name="goodsTypeId">
            				</select>
         			</div>
          		</div>
           	</form>
        </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="addGoods()">提交保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
         	<form class="form-horizontal" action="" method="post" id="ffedit">
                <input type="hidden" id="id" name="id">
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">名称</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="name" name="name"  required="required">
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">价格</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="price" name="price" >
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">介绍</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="intro" name="intro" >
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_name" class="col-sm-4 control-label">库存</label>
         			<div class="col-sm-6">
            				<input type="text" class="form-control" id="stock" name="stock" >
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_file" class="col-sm-4 control-label">封面图片</label>
         			<div class="col-sm-6">
                            <span id="coverCanvas"></span>
                            <input id="goodsCoverFileupload" type="file" name="files[]" data-url="../../controller/goodsController/addUploadGoodsCover">推荐尺寸: 500 * 500
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_file" class="col-sm-4 control-label">详情图片1</label>
         			<div class="col-sm-6">
                            <span id="image1Canvas"></span>
                            <input id="goodsImage1Fileupload" type="file" name="files[]" data-url="../../controller/goodsController/addUploadGoodsImage1">推荐尺寸: 500 * 500
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="input_file" class="col-sm-4 control-label">详情图片2</label>
         			<div class="col-sm-6">
                            <span id="image2Canvas"></span>
                            <input id="goodsImage2Fileupload" type="file" name="files[]" data-url="../../controller/goodsController/addUploadGoodsImage2">推荐尺寸: 500 * 500
         			</div>
          		</div>
          		<div class="form-group">
         			<label for="select_topic" class="col-sm-4 control-label">类目</label>
         			<div class="col-sm-6">
            				<select class="form-control" id="goodsTypeId" name="goodsTypeId">
            				</select>
         			</div>
          		</div>
           	</form>
        </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="updateGoods()">提交保存</button>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
var translateGoodsTypes = [];
var mypage = 1;
var myrows = 10;
var mystatus = 0;
var currentPage = 1;
var pageCount = 1;
var recommendTypeId = 0;
$(function () {
	$('#addGoodsCoverFileupload').fileupload({
			autoUpload: true,
			dataType: 'json',
			async: false,
			success: function(data, textStatus) {
			if (data.success == true){
			   $("#ff").find("#coverCanvas").html(showImage(data.rows));
			}
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
			},
		});
	$('#addGoodsImage1Fileupload').fileupload({
			autoUpload: true,
			dataType: 'json',
			async: false,
			success: function(data, textStatus) {
			if (data.success == true){
			   $("#ff").find("#image1Canvas").html(showImage(data.rows));
			}
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
			},
		});
	$('#addGoodsImage2Fileupload').fileupload({
			autoUpload: true,
			dataType: 'json',
			async: false,
			success: function(data, textStatus) {
			if (data.success == true){
			   $("#ff").find("#image2Canvas").html(showImage(data.rows));
			}
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
			},
		});
	$('#goodsCoverFileupload').fileupload({
			autoUpload: true,
			dataType: 'json',
			async: false,
			success: function(data, textStatus) {
     			if (data.success == true){
      			   $("#ffedit").find("#coverCanvas").html(showImage(data.rows));
     			}
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
			},
		});
	$('#goodsImage1Fileupload').fileupload({
			autoUpload: true,
			dataType: 'json',
			async: false,
			success: function(data, textStatus) {
     			if (data.success == true){
       			    $("#ffedit").find("#image1Canvas").html(showImage(data.rows));
     			}
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
			},
		});
	$('#goodsImage2Fileupload').fileupload({
			autoUpload: true,
			dataType: 'json',
			async: false,
			success: function(data, textStatus) {
			if (data.success == true){
			   $("#ffedit").find("#image2Canvas").html(showImage(data.rows));
			}
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
			},
		});
});

$(document).ready(function(){
  checkAdminAccess();
  setTimeout(function() {
    translateGoodsTypes = translateListActiveGoodsTypes();
    var params = new URLSearchParams(window.location.search);
    var recommend = params.get("recommendTypeId");
    if (isBlank(recommend)) recommendTypeId = 0;
    else recommendTypeId = parseInt(recommend);
    loadDataGrid(1,8);
    genAddModalContents();
  }, 1000);
});

function genAddModalContents(){
  $("#ff").find("#goodsTypeId").html(genGoodsTypeOptions(""));
  $("#ff").find("#coverCanvas").html(showImage(""));
  $("#ff").find("#image1Canvas").html(showImage(""));
  $("#ff").find("#image2Canvas").html(showImage(""));
}

function loadDataGrid(page,rows){
	$.ajax({
		type:"post",
		url: "../../custcontroller/adminGoodsCustController/goods_list",
		data: {
			recommendTypeId:recommendTypeId,
			page:page,
		},
		dataType: 'json',
		success: function(data, textStatus) {
			debugger;
			if ( data.rows !=null ){
			    $("#dgcontent").html("");
                configPageControls(data.totalPage,data.pageNumber,data.totalCount);
                for (let i=0;i<data.rows.length;i++){
  				  appendGridRow(data.rows[i]);
  				}
 			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function appendGridRow(row){
  var rowStr = "<tr id='girdrow'>\n"+
                "<td><p>"+row.id+"</p></td>\n"+
				"<td><p><a href=\"/goods_detail?id="+row.id+" target=\"_blank\">"+showCoverImage(row)+"</a></p></td>\n"+
                "<td><p><a href=\"/goods_detail?id="+row.id+"\" target=\"_blank\">"+row.name+"</a></p></td>\n"+
				"<td><p>"+row.intro+"</p></td>\n"+
				"<td><p>"+row.price+"</p></td>\n"+
				"<td><p>"+translateGoodsType(row.goodsTypeId)+"</p></td>\n"+
				genOperationTd(row) +
                "</tr>\n";
  $("#dgcontent").append(rowStr);
}

function showCoverImage(row){
	if(row.cover){
		return "<img style='height:200px;' border='1' src='data:image/png;base64,"+row.cover+"'/>";
	} else {
		return "<img style='height:200px;' border='1' src='../../images/blank.jpg'/>";
	}
}

function showImage(img){
	if(img){
		return "<img style='height:200px;' border='1' src='data:image/png;base64,"+img+"'/>";
	} else {
		return "<img style='height:200px;' border='1' src='../../images/blank.jpg'/>";
	}
}

function genOperationTd(row){
	var tdStr =	"<td>\n"+
				"<p>\n";
	if (row.isScroll) {
	 tdStr += "<a class=\"btn btn-info\" href=\"javascript:removeRecommendType("+row.id+",1)\">移出条幅</a>";
	} else {
	 tdStr += "<a class=\"btn btn-info\" href=\"javascript:addRecommendType("+row.id+",1)\">加入条幅</a>";
	}
	if (row.isHot) {
	 tdStr += "<a class=\"btn btn-info\" href=\"javascript:removeRecommendType("+row.id+",2)\">移出热销</a>";
	} else {
	 tdStr += "<a class=\"btn btn-info\" href=\"javascript:addRecommendType("+row.id+",2)\">加入热销</a>";
	}
	if (row.isNew) {
	 tdStr += "<a class=\"btn btn-info\" href=\"javascript:removeRecommendType("+row.id+",3)\">移出新品</a>";
	} else {
	 tdStr += "<a class=\"btn btn-info\" href=\"javascript:addRecommendType("+row.id+",3)\">加入新品</a>";
	}
	tdStr += "</p>\n"+
				"<a class=\"btn btn-success\" href=\"javascript:findGoodsById("+row.id+")\">修改</a>\n"+
				"<a class=\"btn btn-danger\" href=\"javascript:softDeleteGoods("+row.id+")\">软删除</a>\n"+
				"<a class=\"btn btn-danger\" href=\"javascript:deleteGoods("+row.id+")\">删除</a>\n"+
				"</td>\n";
	return tdStr;
}

function findGoodsById(id){
	$.ajax({
		type:"post",
		url: "../../controller/goodsController/findGoodsById",
		data: {
		    id:id
		},
		dataType: 'json',
		success: function(data, textStatus) {
			debugger;
			if ( data.success == true && data.rows !=null ){
			    $("#ffedit").find("#id").val(data.rows.id);
				$("#ffedit").find("#name").val(data.rows.name);
				$("#ffedit").find("#price").val(data.rows.price);
				$("#ffedit").find("#intro").val(data.rows.intro);
				$("#ffedit").find("#stock").val(data.rows.stock);
				$("#ffedit").find("#goodsTypeId").html(genGoodsTypeOptions(data.rows.goodsTypeId));
				$("#ffedit").find("#coverCanvas").html(showImage(data.rows.cover));
				$("#ffedit").find("#image1Canvas").html(showImage(data.rows.image1));
				$("#ffedit").find("#image2Canvas").html(showImage(data.rows.image2));
				$("#editModal").modal("show");
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function softDeleteGoods(id){
	$.ajax({
		type: "post",
		url: "../../controller/goodsController/softDeleteGoods",
		data: {
			"id":id
		},
		dataType: 'json',
		success: function(data, textStatus) {
		    if (data.success) {
		        window.location.reload();
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function deleteGoods(id){
	$.ajax({
		type: "post",
		url: "../../controller/goodsController/deleteGoods",
		dataType: 'json',
		data:{"id":id},
		success: function(data, textStatus) {
		    if (data.success) {
				window.location.reload();
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function softDeleteGoods(id){
			$.ajax({
				type: "post",
				url: "../../controller/goodsController/softDeleteGoods",
				data: {
					"id":id
				},
				dataType: 'json',
				success: function(data, textStatus) {
				    if (data.success) {
				        window.location.reload();
					}
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function(XMLHttpRequest,textStatus,errorThrown) {
					alert("Error:"+textStatus);
					alert(errorThrown.toString());
				}
			});
}

function addRecommendType(goodsId,recommendTypeId){
	$.ajax({
		type: "post",
		url: "../../custcontroller/adminGoodsCustController/addRecommendType",
		data:JSON.stringify({
		    "goodsId":goodsId,
			"recommendTypeId":recommendTypeId,
		}),
		dataType: 'json',
		contentType:"application/json;charset=UTF-8",
		success: function(data, textStatus) {
		    if (data.success) {
				window.location.reload();
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function removeRecommendType(goodsId,recommendTypeId){
	$.ajax({
		type: "post",
		url: "../../custcontroller/adminGoodsCustController/removeRecommendType",
		data:JSON.stringify({
		    "goodsId":goodsId,
			"recommendTypeId":recommendTypeId,
		}),
		dataType: 'json',
		contentType:"application/json;charset=UTF-8",
		success: function(data, textStatus) {
		    if (data.success) {
				window.location.reload();
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function updateGoods(){
	$.ajax({
		type: "post",
		url: "../../controller/goodsController/updateGoods",
		data: JSON.stringify({
			id:parseInt($("#ffedit").find("#id").val()),
			name:$("#ffedit").find("#name").val(),
			active:true,
			price:parseFloat($("#ffedit").find("#price").val()),
			intro:$("#ffedit").find("#intro").val(),
			stock:parseInt($("#ffedit").find("#stock").val()),
			goodsTypeId:parseIntNeg($("#ffedit").find("#goodsTypeId").val()),
			isScroll:false,
			isHot:false,
			isNew:false,
		}),
		dataType: 'json',
		contentType:"application/json;charset=UTF-8",
		success: function(data, textStatus) {
			if (data.success){
			   window.location.reload();
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}

function translateGoodsType(value){
	if (isBlank(value) || parseInt(value) <= 0) return "";
	var retVal = value;
	if (translateGoodsTypes != null && translateGoodsTypes != undefined && translateGoodsTypes.length > 0){
		for(var i=0;i<translateGoodsTypes.length;i++){
			if (translateGoodsTypes[i].id == value) return translateGoodsTypes[i].name;
		}
	}
	return retVal;
}

function genGoodsTypeOptions(value){
    var rowStr = "";
    for (let i=0;i<translateGoodsTypes.length;i++){
      if (translateGoodsTypes[i].id == value) {
        rowStr = rowStr + "<option selected=\"selected\" value=\""+translateGoodsTypes[i].id+"\">"+translateGoodsTypes[i].name+"</option>\n";
      }else {
        rowStr = rowStr + "<option value=\""+translateGoodsTypes[i].id+"\">"+translateGoodsTypes[i].name+"</option>\n";
      }
    }
    return rowStr;
}

function translateListActiveGoodsTypes(value){
	var retVal = [];
	$.ajax({
		type:"post",
		url: "../../controller/goodsTypeController/listActiveGoodsTypes",
		data: {
			id:value
		},
		dataType: 'json',
		async:false,
		success: function(data, textStatus) {
			debugger;
			if ( data.rows !=null ){
				retVal = data.rows;
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
	return retVal;
}

function addGoods(){
	$.ajax({
		type: "post",
		url: "../../controller/goodsController/addGoods",
		data: JSON.stringify({
   			name:$("#ff").find("#name").val(),
   			active:true,
   			price:parseFloat($("#ff").find("#price").val()),
   			intro:$("#ff").find("#intro").val(),
   			stock:parseInt($("#ff").find("#stock").val()),
   			goodsTypeId:parseIntNeg($("#ff").find("#goodsTypeId").val()),
   			isScroll:false,
   			isHot:false,
   			isNew:false,
		}),
		dataType: 'json',
		contentType:"application/json;charset=UTF-8",
		success: function(data, textStatus) {
			if (data.success) {
				window.location.reload();
			}
			},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
}
</script>
</html>
